﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            display:flex;

        }
        li {
            width: 112px;
            height: 500px;
            list-style: none;
            background: url(./e.png) no-repeat;
           
        }
    </style>
</head>
<body>
    <div>
        <ul >
            
        </ul>
    </div>
    <script>
        str = ``
        for (var i = 1; i < 10; i++) {
            str += `<li style="background-position-x: ${-112 * (i - 1)}px;"> <video src="notes/${i}.oga"></video></li>`
        }
        let ul = document.querySelector(`ul`);
        ul.innerHTML = str;
        let lis = document.querySelectorAll(`li`)
        let videos = document.querySelectorAll(`video`)
        for (let i = 0; i < lis.length; i++) {
           
            lis[i].onclick = function () {
                vid(i);
            }
            window.onkeydown = function (e) {
                console.log(e.key);
                console.log(e.keyCode);
                if (e.keyCode==81) {
                    vid(0);
                } if (e.keyCode == 87) {
                    vid(1);
                } if (e.keyCode == 69) {
                    vid(2);
                } if (e.keyCode == 82) {
                    vid(3);
                } if (e.keyCode == 84) {
                    vid(4);
                }
            }
       }
        function vid(i) {
            for (var j = 0; j < lis.length; j++) {
                videos[i].pause()
            }
            videos[i].load();
            videos[i].play();  
        }
    </script>
    
</body>

</html>